<template>
  <div class="page-init">
    <el-pagination v-model:currentPage="curPage.page" v-model:page-size="curPage.size" :page-sizes="[10, 20, 50, 100]"
      :small="small" :pager-count="pagerCount?pagerCount:7" background :layout="isNoHavePageSize?'total, prev, pager, next':'total,sizes, prev, pager, next'" :total="page.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import {
  ref
} from 'vue'

export default {
  name:'Page',
  props: {
    small: Boolean,
    pagerCount:Number,
    isNoHavePageSize:Boolean,
    page: {
      type: Object,
      default: function () {
        return {
          page: 1,
          size: 20,
          total: 100,
        }
      }
    },
  },
  emits: ['pageChange'],
  setup(props, content) {
    const curPage = ref(props.page)
    // 分页大小改变
    const handleSizeChange = function (params) {
      curPage.value.size = params
      content.emit('pageChange', curPage.value)
    }

    // 页数改变
    const handleCurrentChange = function (params) {
      curPage.value.page = params
      content.emit('pageChange', curPage.value)
    }

    return {
      handleCurrentChange,
      handleSizeChange,
      curPage
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  &-init {
    text-align: right;
    padding: 10px 0;
  }

}

::v-deep(.el-pagination) {
  justify-content: flex-end;
}

::v-deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  // background-color: #428BCA;
}
</style>
